<template>
    <div class="content">
        <SearchTitle @searchClick="SearchTitleClick" />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="jsflexBox">
                    <div class="jsflexLabel">商品类型</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.val === item.dictValue }"
                            v-for="item in sysProductTypeData" :key="item.id" @click="splxTasbsfun(item.dictValue)">
                            {{ item.dictLabel }}
                        </div>
                    </div>
                </div>
                <div class="jsflexBox">
                    <div class="jsflexLabel">县区区域</div>
                    <div class="jsRightFlex">
                        <div :class="{ active: parameterData.region_id === item.dictValue }"
                            v-for="item in sysRegionData" :key="item.id" 
                            @click="xqTasbsfun(item.dictValue)" >
                            {{ item.dictLabel }}
                        </div>
                    </div>
                </div>
            </el-card>
            <div class="gxgxBox">
                <gongxushangpin v-for="(item,index) in lcEnterpriseInfosLoadshopNoData" :key="index" :formData="item" />
                <div class="fenyeBox">
                    <el-pagination v-model:current-page="parameterData.page"
                        v-model:page-size="parameterData.limit" background
                        layout="prev, pager, next, jumper" :total="totalData" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import SearchTitle from '@/components/general/SearchTitle.vue';
import gongxushangpin from '@/components/general/gongxushangpin.vue';
import { useRouter, useRoute } from 'vue-router';
import { sysRegion, sysProductType } from '@/api/dictionary.js'
import { lcEnterpriseInfosLoadshopNo } from '@/api/api.js';
const router = useRouter();
const route = useRoute();
onMounted(() => {
    parameterData.value.val = route.query.val || '';
    // 顶部搜索跳转进来的
    if (route.query.searchType) {
        parameterData.value.shop_name = route.query.shop_name;
    }
    lcEnterpriseInfosLoadshopNofun()
    sysProductTypefun()
    sysRegionfun()
})
// 县区数据
const sysRegionData = ref([]);
const sysRegionfun = async () => {
    const res = await sysRegion()
    sysRegionData.value = [
        {
            dictLabel: '全部',
            dictValue: ''
        },
        ...res.data
    ]
}
// 商品类型
const sysProductTypeData = ref([]);
const sysProductTypefun = async () => {
    const res = await sysProductType();
    sysProductTypeData.value = [
        {
            dictLabel: '全部',
            dictValue: '',
        },
        ...res.data
    ]
}
const parameterData = ref({
    page: 1,
    limit: 5,
    region_id: '',
    val:''
})
const totalData = ref(0); // 总数据量
// 供需信息
const lcEnterpriseInfosLoadshopNoData = ref([])
const lcEnterpriseInfosLoadshopNofun = async () => {
    const res = await lcEnterpriseInfosLoadshopNo(parameterData.value);
    totalData.value = res.count
    lcEnterpriseInfosLoadshopNoData.value = res.data
}
// 商品类型监听
const splxTasbsfun = (val) => {
    parameterData.value.val = val;
    parameterData.value.page = 1; // 重置页码为1
    lcEnterpriseInfosLoadshopNofun(); // 重新加载数据
}
// 县区监听
const xqTasbsfun = (val) => {
    parameterData.value.region_id = val;
    parameterData.value.page = 1; // 重置页码为1
    lcEnterpriseInfosLoadshopNofun(); // 重新加载数据
}
// 分页监听
const handleCurrentChange = (val) => {
    parameterData.value.page = val;
    lcEnterpriseInfosLoadshopNofun()
}
// 顶部搜索点击事件
const SearchTitleClick = (name) => {
    parameterData.value.shop_name = name;
    parameterData.value.page = 1;
    lcEnterpriseInfosLoadshopNofun()
}
// 返回
const fanhuifun = () => {
    router.go(-1);
};
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    // min-height: calc(100vh - 60px);
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.gxgxBox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.fenyeBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #F1F1F1;
    padding-top: 20px;
}
.jsflexBox {
    display: flex;
    margin-bottom: 20px;

    .jsflexLabel {
        width: 8%;
        font-size: 14px;
        color: #000000;
    }

    .jsRightFlex {
        display: flex;
        gap: 15px;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        cursor: pointer;
    }
}
.active {
    color: #2972FA;
    font-weight: bold;
}
</style>
